<template>
    <div class="11111" ref="div" v-if="show">
        <div>
            {{ title }}
        </div>
        <div>
            <el-button size="medium" style="width: 120px" @click="handleCancel">
                {{ cancelButtonText }}
            </el-button>
            <el-button
                size="medium"
                style="width: 120px"
                @click="handleConfirm"
            >
                {{ confirmButtonText }}
            </el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: "提示",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            show:true,
        };
    },
    methods: {
        handleCancel() {
            this.close();
            this.callback('cancel');

        },
        handleConfirm() {
            this.close();
            console.log('组件',this)
            this.callback('confirm');
        },
        /**
         * @description: 移出
         */
        close() {
            this.visible = false;
            setTimeout(() => {
                console.log(this.$el)
                console.log(this.$refs.div)
                // this.show = false;
                this.$el.parentNode.removeChild(this.$el);
            }, 300);
        },
    },
};
</script>

<style lang="scss" scoped>
</style>